<template>
  <div class="dy-content">
    <div class="dy-hand">
      <span>{{curYear}}年{{curMonth}}月</span>
      <span class="dy-arrow">
        <van-icon name="arrow-left" @click="arrow(0)" class="dy-left" />
        <van-icon name="arrow" @click="arrow(1)" />
      </span>
    </div>

    <div class="dy-title">
      <div class="dy-cell" v-for="(item,index) in titleList" :key="index">{{item}}</div>
    </div>

    <div class="dy-day">
      <div class="dy-dayitem" v-for="(item,index) in weekDay" :key="index+'empty'"></div>
      <div
        class="dy-dayitem"
        :class="{'pointer':item!==0}"
        v-for="(item,index) in days"
        :key="index"
        @click="onClickDay(item)"
      >
        <div
          :class="{'today':item==today.d,select:item==selected.d}"
          v-if="item!==0"
          class="dy-text"
        >
          {{item}}
          <div :class="{'has-course':(hasCourse(item))}"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      curYear: new Date().getFullYear(),
      curMonth: new Date().getMonth() + 1,
      titleList: ["日", "一", "二", "三", "四", "五", "六"],
      days: "",
      weekDay: "",
      today: {
        y: new Date().getFullYear(),
        m: new Date().getMonth() + 1,
        d: new Date().getUTCDate()
      },
      selected: {
        y: "",
        m: "",
        d: ""
      }
    };
  },
  props: {
    courseDate: {
      type: Array
    },
    firstDay: {
      type: Number,
      default: 1,
      validator(val) {
        if (val >= 1 && val <= 7) {
          return true;
        }
        return false;
      }
    }
  },
  components: {},
  mounted() {
    this.init();
    this.$emit("onCurDate", `${this.today.y}-${this.today.m}-${this.today.d}`);
  },
  computed: {
    courseDateSet() {
      const retAry = [];
      this.courseDate.forEach(v => {
        retAry.push(new Date(v.replace(/-/g, "/")));
      });
      return retAry;
    }
  },
  methods: {
    isDateEqual(date1, date2) {
      if (date1.getDate() == date2) {
        return true;
      }
      return false;
    },
    hasCourse(date) {
      for (const i of this.courseDateSet) {
        if (this.isDateEqual(i, date)) {
          return true;
        }
      }
      return false;
    },
    //切换月份
    arrow(v) {
      if (v) {
        this.curMonth++;
        if (this.curMonth > 12) {
          this.curMonth = 1;
          this.curYear++;
        }
        this.$emit("onChangeDate", `${this.curYear}-${this.curMonth}-1`);
        this.today.d = null;
        this.selected.d = null;
        if (this.curMonth == new Date().getMonth() + 1) {
          this.today.d = new Date().getUTCDate();
        }
      } else {
        this.curMonth--;
        if (this.curMonth < 1) {
          this.curMonth = 12;
          this.curYear--;
        }
        this.$emit("onChangeDate", `${this.curYear}-${this.curMonth}-1`);
        this.today.d = null;
        this.selected.d = null;
        if (this.curMonth == new Date().getMonth() + 1) {
          this.today.d = new Date().getUTCDate();
        }
      }
    },
    onClickDay(v) {
      this.selected.y = this.curYear;
      this.selected.m = this.curMonth;
      this.selected.d = v;
      this.$emit("onclickDate", `${this.selected.y}-${this.selected.m}-${v}`);
    },
    init() {
      this.days = new Date(this.curYear, this.curMonth, 0).getDate();
      this.weekDay = new Date(this.curYear, this.curMonth - 1, 1).getDay();
    }
  }
};
</script>

<style scoped>
.dy-hand {
  font-size: 22px;
  color: #595959;
  line-height: 60px;
  padding-left: 20px;
}
.dy-hand > .dy-arrow {
  float: right;
  padding-right: 15px;
}
.dy-hand > .dy-arrow > .dy-left {
  margin-right: 20px;
}
.dy-title > .dy-cell {
  width: 14.28%;
  height: 40px;
  display: block;
  float: left;
  text-align: center;
  position: relative;
}
.pointer {
  cursor: pointer;
}
.dy-day {
  font-size: 15px;
  color: #595959;
  border: 1px solid #fff;
}
.dy-day > .dy-dayitem {
  width: 14.28%;
  height: 45px;
  float: left;
  text-align: center;
  line-height: 30px;
  position: relative;
}
.dy-day > .dy-dayitem > .dy-text {
  margin: 0 auto;
}
.dy-day > .dy-dayitem > .today {
  color: #eb6100;
  background: rgba(235, 97, 0, 0.1);
  width: 34px;
  height: 34px;
  border-radius: 50%;
}
.dy-day > .dy-dayitem > .has-course {
  position: relative;
}
.dy-day > .dy-dayitem > .has-course::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  bottom: -15px;
  transform: translateX(-50%);
  background: #eb6100;
}
.dy-day > .dy-dayitem > .select {
  color: #fff;
  background: #eb6100;
  width: 34px;
  height: 34px;
  border-radius: 50%;
}
.dy-day > .dy-dayitem > .select::after {
  content: "";
  display: block;
  clear: both;
}
</style>